<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

				<div class="productsee" v-loading = "loading">
				  <div class="title">{{article.name}}产品详情</div>
					<div class="alt">
						<div class="altli">发布人：<span class="name">{{article.originator}}</span></div>
						<div class="altli">最后修改日期：{{article.updated_at}}</div>
						<div class="altli select">
							<el-dropdown @command="handleCommand" trigger="click">
							  <span class="el-dropdown-link se">
								查看历史版本<i class="el-icon-arrow-down el-icon--right"></i>
							  </span>
							  <el-dropdown-menu slot="dropdown" v-if="shopshow">
								<el-dropdown-item  v-for="item in jilu" :key="item.plan_order_logs_id" :command="item.plan_order_logs_id">{{item.updated_at}}</el-dropdown-item>
							  </el-dropdown-menu>
                              <el-dropdown-menu slot="dropdown" v-if="!shopshow">
                              		<el-dropdown-item  v-for="item in jilu" :key="item.id" :command="item.id">{{item.updated_at}}</el-dropdown-item>
                              </el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
                    <div v-if="shopshow">
                        <div class="ptitle">
                            <div class="pline">产品基础属性</div>
                        </div>
                        <div class="palt">
                            <div class="pl">产品名称:</div><div class="pr">{{article.name}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">运营商:</div><div class="pr">{{article.operator}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">产品类型:</div><div class="pr">{{article.plan_type_id}}</div>
                        </div>

                        <div class="palt">
                            <div class="pl">产品编号:</div><div class="pr">{{article.sku}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">归属地:</div><div class="pr">{{article.province}}{{article.city}}</div>
                        </div>

                        <div class="ptitle">
                            <div class="pline">生产项</div>
                        </div>
                        <div class="palt">
                            <div class="pl">身份证号码:</div><div class="pr">{{article.need_num}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">身份证照片:</div><div class="pr">{{article.real_name_type}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">生产连接:</div><div class="pr">{{article.produce_address}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">开卡年龄限制:</div><div class="pr">{{article.min_age}}-{{article.max_age}}</div>
                        </div>

                        <div class="palt" v-if="article.max_purchase == -1">
                            <div class="pl">开卡数量限制:</div><div class="pr">无限制</div>
                        </div>
                        <div class="palt"  v-if="article.max_purchase != -1">
                            <div class="pl">开卡数量限制:</div><div class="pr">{{article.max_purchase}}</div>
                        </div>

                        <div class="palt">
                            <div class="pl">不发货地区:</div><div class="pr">{{article.warn_city}}</div>
                        </div>
                        <div class="palt">
                            <div class="pl">生产备注:</div><div class="pr">{{article.produce_remark}}</div>
                        </div>

                        <div class="ptitle">
                            <div class="pline">详情备注</div>
                        </div>
                    </div>

                    <div class="ptitle" v-if="!shopshow">
                        <div class="pline">产品销售页</div>
                    </div>

					<div class="beizhutitle">产品详情:</div>
					<div class="beizhualt" v-html="article.description"></div>
					<div class="beizhutitle">修改提要:</div>
					<div class="beizhualt">{{article.commit}}</div>
				</div>
			</div>
		</div>
        <!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
            "top": top,
            "foot": foot
		},
		name: 'kanban',
		data(){
			return{
				article:{},
				loading:true,
				jilu:[],
                shopshow:true
			}
		},
		created() {
			console.log(this.$route.query.id)
			var that = this

			//获取产品detail
			axios.get("/api/plan-market/product/plan/logs?action=detail&type="+this.$route.query.type+"&product_id="+this.$route.query.id)
			.then(function(response){
				that.jilu = response.data.data
				that.article = response.data.data[0]
                if(that.article.operator == 10086){ that.article.operator = "移动"}
                if(that.article.operator == 10000){ that.article.operator = "电信"}
                if(that.article.operator == 10010){ that.article.operator = "联通"}
                if(that.article.operator == 10099){ that.article.operator = "中国广电"}

                if(that.article.real_name_type == 0){ that.article.real_name_type = "需要"}
                if(that.article.real_name_type == 1){ that.article.real_name_type = "不需要"}

				that.loading = false
                if(that.article.order_pages_id != that.article.plan_order_pages_id){
                    that.shopshow = false
                }

			})

		},
        methods: {
        	//选择版本执行
        	handleCommand(id) {
        		this.loading = true
                //获取产品
                var that = this
                if(this.$route.query.type == 1){
                    axios.get("/api/plan-market/product/plan/logs?action=detail&type="+this.$route.query.type+"&id="+id)
                    .then(function(response){
                    	that.article = response.data.data[0]
                        if(that.article.operator == 10086){ that.article.operator = "移动"}
                        if(that.article.operator == 10000){ that.article.operator = "电信"}
                        if(that.article.operator == 10010){ that.article.operator = "联通"}
                        if(that.article.operator == 10099){ that.article.operator = "中国广电"}

                    	that.loading = false
                    })
                }else{
                    axios.get("/api/plan-market/product/plan/logs?action=detail&type="+this.$route.query.type+"&id="+id)
                    .then(function(response){
                    	that.article = response.data.data[0]
                    	that.loading = false
                    })
                }

          }

        }
	}
</script>

<style lang="scss" scoped>
	.index{

        .productsee{ padding: 20px; color: #666666; background: #FFFFFF;}
        .title{ padding-bottom: 20px; font-size: 27px;}
        .alt{ display: flex;}
        .altli{ margin-right: 30px;}
        .altli .name{ color: #FFA200;}
        .altli .se{ color: #3399FF; }
        .select{ cursor: pointer;}
        .ptitle{ line-height: 48px; display: flex; align-items: center; height: 48px; background: #F5F5F5; margin-top: 40px; margin-bottom: 20px; padding-left: 30px; color: #333;}
        .pline{ border-left: 5px #F7931E solid; height: 16px; line-height: 16px; padding-left: 20px;}
        .palt{ display: flex; margin: 15px 0; font-size: 14px;}
        .pl{ flex-basis: 128px; text-align: right; margin-right: 10px;}
        .pr{}
        .beizhutitle{ padding: 20px 0; padding-left: 50px;}
        .beizhualt{ font-size: 14px; margin-bottom: 20px; padding-left: 50px;}
	}
</style>
